<template>
  <div class="app-container">
    <div>
      <el-input v-model="searchname" placeholder="输入员工姓名" style="width: 200px" />
      <el-button type="primary" icon="el-icon-search" plain @click="clickSearch">搜索</el-button>
      <el-button-group style="padding-left: 30px">
        <el-button type="primary" icon="el-icon-plus" plain @click="showAddUserDialog">新增人员</el-button>
        <el-button type="primary" icon="el-icon-download" plain>导出人员名单Excel</el-button>
      </el-button-group>
    </div>
    <div style="padding: 10px" />
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="工号" align="center">
        <template slot-scope="scope">
          {{ scope.row.uid }}
        </template>
      </el-table-column>

      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sta | statusFilter">
            {{ getStaStr(scope.row.sta) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="部门-岗位" align="center" width="200px">
        <template slot-scope="scope">
          <div v-for="(item, idx) in scope.row.departPoses" :key="idx">
            {{ item.name }}
            <el-button
              type="primary"
              size="mini"
              plain
              @click="clickModifyDp(scope.row.uid, item.dpid, item.department, item.position)"
            >调岗</el-button>
          </div>
          <el-button type="primary" size="mini" plain @click="clickAddDp(scope.row.uid)">增加岗位</el-button>
        </template>
      </el-table-column>

      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column label="邮箱" align="center">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>

      <el-table-column label="密码" align="center">
        <template slot-scope="scope">
          {{ scope.row.password }}
        </template>
      </el-table-column>

      <el-table-column label="入职时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createtime }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type: 'zhuanzheng', uid: scope.row.uid}">转正</el-dropdown-item>
              <el-dropdown-item :command="{type: 'lizhi', uid: scope.row.uid}">离职</el-dropdown-item>
              <el-dropdown-item
                :command="{type: 'bianji', uid: scope.row.uid, name: scope.row.name, phone: scope.row.phone, email: scope.row.email, password: scope.row.password}"
              >
                编辑</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px" />
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <el-dialog title="请输入新密码" width="50%" :visible.sync="modifyPwdDialogVisible">
      <el-form>
        <el-form-item label="新密码">
          <el-input v-model="modifyPwdNew" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyPwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyPasswordConform">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="岗位调整" width="50%" :visible.sync="modifyDpDialog.visible">
      <el-form>
        <el-form-item label="部门">
          <el-select v-model="modifyDpDialog.department">
            <el-option v-for="item2 in departmentList" :key="item2.id" :label="item2.name" :value="item2.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="modifyDpDialog.position">
            <el-option v-for="item2 in positionList" :key="item2.id" :label="item2.name" :value="item2.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDpDialog.visible = false">取 消</el-button>
        <el-button @click="modifyDpRm">移 出</el-button>
        <el-button type="primary" @click="modifyDpModify">调 整</el-button>
      </div>
    </el-dialog>

    <el-dialog title="增加岗位" width="50%" :visible.sync="addDpDialog.visible">
      <el-form>
        <el-form-item label="部门">
          <el-select v-model="addDpDialog.department">
            <el-option v-for="item2 in departmentList" :key="item2.id" :label="item2.name" :value="item2.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="addDpDialog.position">
            <el-option v-for="item2 in positionList" :key="item2.id" :label="item2.name" :value="item2.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDpDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="addDp">增 加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑员工信息" :visible.sync="modifyUserDialog.visible" width="50%" :close-on-click-modal="false">
      <div>
        <el-form ref="form" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="modifyUserDialog.name" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="modifyUserDialog.phone" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="modifyUserDialog.email" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="modifyUserDialog.password" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyUserDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="modifyUser">修 改</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加员工" :visible.sync="addUserDialog.visible" width="50%" :close-on-click-modal="false">
      <div>
        <el-form ref="form" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="addUserDialog.name" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="addUserDialog.phone" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="addUserDialog.email" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addUserDialog.password" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="addUserDialog.sta">
              <el-option label="试用" value="1" />
              <el-option label="转正" value="2" />
              <el-option label="离职" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item v-for="(item, idx) in addUserDialog.departPoses" :key="idx" :label="'部门-岗位' + (idx + 1)">
            <el-select v-model="addUserDialog.departPoses[idx].department">
              <el-option v-for="item1 in departmentList" :key="item1.id" :label="item1.name" :value="item1.id" />
            </el-select>
            <el-select v-model="addUserDialog.departPoses[idx].position">
              <el-option v-for="item2 in positionList" :key="item2.id" :label="item2.name" :value="item2.id" />
            </el-select>
            <el-button style="margin" type="error" @click="clickDelDepartPos(idx)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="margin" type="primary" @click="clickAddDepartPos">增加部门岗位</el-button>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialog.visible = false">关 闭</el-button>
        <el-button type="primary" @click="clickAddUser()">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPositionList
} from '@/api/position'
import {
  getDepartmentList
} from '@/api/department'
import {
  userList,
  addUser,
  delUser,
  modifyUserPwd,
  rmUserFromDp,
  updateUserInfo,
  updateUserDp,
  addUserDp
} from '@/api/user'
import {
  Message,
  MessageBox
} from 'element-ui'

export default {
  filters: {
    statusFilter(sta) {
      const statusMap = {
        1: 'info',
        2: 'success',
        3: 'danger'
      }
      return statusMap[sta]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      pageIndex: 1,
      pageCount: 10,
      searchname: '', // 要搜索员工的姓名
      dataTotal: 0,
      modifyPwdDialogVisible: false,
      modifyPwdUid: 0, // 需要修改密码的员工id
      modifyPwdNew: '', // 新密码
      departmentList: null,
      positionList: null,
      // 岗位调整
      modifyDpDialog: {
        visible: false,
        uid: 0,
        dpid: 0,
        department: '',
        position: ''
      },
      // 增加岗位
      addDpDialog: {
        visible: false,
        uid: 0,
        department: '',
        position: ''
      },
      // 添加员工
      addUserDialog: {
        visible: false,
        name: '',
        phone: '',
        email: '',
        password: '',
        sta: '',
        departPoses: [{
          department: '',
          position: ''
        }]
      },
      // 编辑信息
      modifyUserDialog: {
        visible: false,
        uid: '',
        name: '',
        phone: '',
        email: '',
        password: ''
      }
    }
  },
  created() {
    this.getUserList()
    getDepartmentList().then((data) => {
      this.departmentList = data.list
    })
    getPositionList().then((data) => {
      this.positionList = data
    })
  },
  methods: {
    getUserList() {
      this.listLoading = true
      userList({
        pageIndex: this.pageIndex,
        pageCount: this.pageCount,
        name: this.searchname || ''
      }).then(
        (data) => {
          this.listLoading = false
          this.list = data.list
          this.dataTotal = data.count
        }
      )
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.getUserList()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.getUserList()
    },
    // 点击修改密码
    onClickModifyPassword(uid) {
      console.log('modify password ', uid)
      this.modifyPwdUid = uid
      this.modifyPwdNew = ''
      this.modifyPwdDialogVisible = true
    },
    // 确认修改密码
    modifyPasswordConform() {
      this.modifyPwdDialogVisible = false
      modifyUserPwd({
        uid: this.modifyPwdUid,
        password: this.modifyPwdNew
      }).then(() => {
        this.getUserList()
      })
    },
    // 点击删除员工
    onClickDeleteUser(uid) {
      MessageBox.confirm('删除员工操作不可逆，请谨慎操作', '是否删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser({
          uid
        }).then(() => {
          this.getUserList()
        })
      })
    },
    // 显示添加员工界面
    showAddUserDialog() {
      this.addUserDialog.visible = true
      this.addUserDialog.name = ''
      this.addUserDialog.phone = ''
      this.addUserDialog.email = ''
      this.addUserDialog.password = ''
      this.addUserDialog.sta = ''
      this.addUserDialog.departPoses = [{
        department: '',
        position: ''
      }]
    },
    clickAddUser() {
      if (!this.addUserDialog.name || !this.addUserDialog.phone || !this.addUserDialog.email || !this.addUserDialog
        .password || !this.addUserDialog.sta) {
        return Message({
          message: '请输入完整信息',
          type: 'error',
          duration: 3 * 1000
        })
      }

      if (this.addUserDialog.departPoses.length <= 0) {
        return Message({
          message: '请输入完整信息',
          type: 'error',
          duration: 3 * 1000
        })
      }

      const departMap = {}
      for (let i = 0; i !== this.addUserDialog.departPoses.length; i++) {
        if (!this.addUserDialog.departPoses[i].department || !this.addUserDialog.departPoses[i].position) {
          return Message({
            message: '请输入完整信息',
            type: 'error',
            duration: 3 * 1000
          })
        }
        departMap[this.addUserDialog.departPoses[i].department] = 1
      }

      if (Object.getOwnPropertyNames(departMap).length < this.addUserDialog.departPoses.length) {
        return Message({
          message: '同一部门只能添加1个岗位',
          type: 'error',
          duration: 3 * 1000
        })
      }

      this.addUserDialog.visible = false
      addUser({
        name: this.addUserDialog.name,
        password: this.addUserDialog.password,
        phone: this.addUserDialog.phone,
        email: this.addUserDialog.email,
        departPoses: this.addUserDialog.departPoses,
        sta: this.addUserDialog.sta
      }).then(() => {
        this.getUserList()
      })
    },
    clickSearch() {
      this.getUserList()
    },
    clickAddDepartPos() {
      this.addUserDialog.departPoses.push({
        department: '',
        position: ''
      })
    },
    clickDelDepartPos(idx) {
      if (this.addUserDialog.departPoses.length <= 1) return
      this.addUserDialog.departPoses.splice(idx, 1)
    },
    getStaStr(sta) {
      if (sta === 1) {
        return '试用'
      } else if (sta === 2) {
        return '转正'
      } else if (sta === 3) {
        return '离职'
      }
      return ''
    },
    // 操作菜单
    handleCommand(info) {
      console.log('handleCommand', info)
      if (info.type === 'zhuanzheng') {
        updateUserInfo({
          uid: info.uid,
          sta: 2
        }).then(() => {
          this.getUserList()
        })
      } else if (info.type === 'lizhi') {
        updateUserInfo({
          uid: info.uid,
          sta: 3
        }).then(() => {
          this.getUserList()
        })
      } else if (info.type === 'bianji') {
        this.clickModifyUser(info.uid, info.name, info.phone, info.email, info.password)
      } else if (info.type === 'shanchu') {
        this.onClickDeleteUser(info.uid)
      }
    },
    // 点击部门岗位调整
    clickModifyDp(uid, dpid, department, position) {
      console.log('clickModifyDp', uid, dpid, department, position)
      this.modifyDpDialog.visible = true
      this.modifyDpDialog.uid = uid
      this.modifyDpDialog.dpid = dpid
      this.modifyDpDialog.department = department
      this.modifyDpDialog.position = position
    },
    // 调整岗位
    modifyDpModify() {
      this.modifyDpDialog.visible = false
      updateUserDp({
        uid: this.modifyDpDialog.uid,
        dpid: this.modifyDpDialog.dpid,
        department: this.modifyDpDialog.department,
        position: this.modifyDpDialog.position
      }).then(() => {
        this.getUserList()
      })
    },
    // 岗位中移出
    modifyDpRm() {
      this.modifyDpDialog.visible = false
      rmUserFromDp({
        dpid: this.modifyDpDialog.dpid
      }).then(() => {
        this.getUserList()
      })
    },
    // 点击增加岗位
    clickAddDp(uid) {
      console.log('click add dp111', uid)
      this.addDpDialog.visible = true
      this.addDpDialog.uid = uid
      this.addDpDialog.department = ''
      this.addDpDialog.position = ''
    },
    // 增加部门岗位
    addDp() {
      this.addDpDialog.visible = false
      addUserDp({
        uid: this.addDpDialog.uid,
        department: this.addDpDialog.department,
        position: this.addDpDialog.position
      }).then(() => {
        this.getUserList()
      })
    },
    // 点击编辑员工
    clickModifyUser(uid, name, phone, email, password) {
      this.modifyUserDialog.visible = true
      this.modifyUserDialog.uid = uid
      this.modifyUserDialog.name = name
      this.modifyUserDialog.phone = phone
      this.modifyUserDialog.email = email
      this.modifyUserDialog.password = password
    },
    // 编辑员工
    modifyUser() {
      this.modifyUserDialog.visible = false
      updateUserInfo({
        uid: this.modifyUserDialog.uid,
        name: this.modifyUserDialog.name,
        phone: this.modifyUserDialog.phone,
        email: this.modifyUserDialog.email,
        password: this.modifyUserDialog.password
      }).then(() => {
        this.getUserList()
      })
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
